<template>
  <a-row class="container">
    <a-row class="title-item">污染源设备申领情况</a-row>
    <a-row class="border">
      <a-col :span="6" class="a">
        <h3 class="h2">污染源分类</h3>
        <a-row class="list-left">
          <a-directory-tree
            multiple
            default-expand-all
            @select="onSelect"
            :show-line="false"
            :show-icon="false"
          >
            <a-tree-node key="0-0">
              <div slot="title" style="color:#9fb043">
                备机
                <span style="color:#bebebe">({{standbyMachine.length}}种/{{MachineSpare}}台)</span>
              </div>
              <a-tree-node v-for="(item) in standbyMachine" :key="item.id">
                <template>
                  <div slot="title">{{item.spareVersion}}型号 | 剩余{{item.spareAmount}}台</div>
                </template>
              </a-tree-node>
            </a-tree-node>

            <a-tree-node key="0-1">
              <div slot="title" style="color:#9fb043">
                备品配件
                <span style="color:#bebebe">({{standbyProduct.length}}种/{{ProductSpare}}件)</span>
              </div>
              <a-tree-node v-for="(item) in standbyProduct" :key="item.id">
                <template>
                  <div slot="title">{{item.spareVersion}}型号 | 剩余{{item.spareAmount}}件</div>
                </template>
              </a-tree-node>
            </a-tree-node>
          </a-directory-tree>
        </a-row>
      </a-col>
      <a-col :span="8" class="right">
        <div class="c">
          <a-row class="h2">申领情况</a-row>
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </div>
        <a-table
          :rowKey="record=> record.id"
          :columns="columns"
          :data-source="datas"
          :pagination="false"
        >
          <span slot="action" slot-scope="text,record,index">
            <a class="solvebtn" @click="showModal(record,index)">查看详情</a>
          </span>
        </a-table>
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total}条记录`"
            v-model="current"
            :total="total"
            :defaultPageSize="size"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
        <a-modal v-model="visible" title="申领详情" @ok="handleOk" centered width="50%" :footer="null">
          <a-form
            :label-col="{ span: 8}"
            :wrapper-col="{span:16}"
            layout="horizontal"
            :colon="false"
          >
            <a-row type="flex" justify="center">
              <a-col :span="7">
                <a-form-item label="申领数量">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="modalList.applyAmount"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="大区名称">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    v-model="modalList.areaName"
                    disabled
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="库存编号">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="modalList.spareMns"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row justify="center" type="flex">
              <a-col :span="7">
                <a-form-item label="领用人">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="modalList.nickname"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="物资类型">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="modalList.typeName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="使用寿命">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="modalList.applyOpinion"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <!--<a-row justify="center" type="flex">
              <a-col style="margin-left:15px">
                <a-form-item label="设备品牌" :label-col="{span: 2}" :wrapper-col="{span:10}">
                  <a-input
                    class="inline-input"
                    autocomplete="off"
                    disabled
                    v-model="spareInfoDetails.spareBrand"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>-->
          </a-form>
        </a-modal>
      </a-col>
    </a-row>
  </a-row>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      datas: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "申领时间",
          dataIndex: "applyTime",
          align: "center",
        },
        {
          title: "申领人",
          dataIndex: "nickname",
          align: "center",
        },
        {
          title: "申领原因",
          dataIndex: "applyOpinion",
          ellipsis: true,
          width: "30%",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "address",
          align: "center",
          width: "20%",
          scopedSlots: { customRender: "action" },
        },
      ],
      current: 1,
      size: 10,
      total: 0,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      activeKey: 0,
      standbyMachine: [], //备机列表
      standbyProduct: [], //备品列表
      MachineSpare: "", //备机共计
      ProductSpare: "", //备品共计
      detailList: [],
      visible: false,
      modalList: [],
      spareInfoDetails: [],
      applyAmount: "",
      userId: "",
    };
  },
  mounted() {
    this.searchType();
    this.getId();
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    getId() {
      this.userId = this.$user.id;
    },
    // 查询烟气分类下的所有设备
    searchType() {
      this.$api.GetlistEquipmentClassification(11).then((res) => {
        console.log(res);
        this.standbyProduct =
          res.data.data[1].equipmentClassificationInfoPoList;
        this.ProductSpare = res.data.data[1].allTotalSpare;
        this.standbyMachine =
          res.data.data[0].equipmentClassificationInfoPoList;
        this.MachineSpare = res.data.data[0].allTotalSpare;
      });
    },
    // 获取记录详情
    onSelect(key) {
      console.log(key);
      this.$api
        .PostlistApplyDetails({
          spareId: key[0],
          currentPage: this.current,
          pageSize: this.size,
          userId:this.userId
        })
        .then((res) => {
          console.log(res);
          this.datas = res.data.data.records;
          this.datas.forEach((v) => {
            if (v.applyTime !== null) {
              v.applyTime = moment(v.applyTime).format("YYYY-MM-DD");
            }
          });
          this.total = res.data.data.total;
        });
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.onSelect();
    },
    open(index) {
      this.activeKey = index;
    },

    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //模态框
    showModal(data, index) {
      this.visible = true;
      console.log(data, index);
      this.$api.GetgetSpareDetail(data.id).then((res) => {
        console.log(res);
        this.modalList = res.data.data;
        // this.spareInfoDetails = res.data.data.spareInfoDetails[0];
      });
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  },
};
</script>
<style scoped src="../../../assets/style/pollution.css"></style>
<style scoped>
.h2 {
  color: #37ddc0;
  line-height: 40px;
  margin-left: 30px;
}
.border {
  height: calc(100% - 98px);
}
.list-left {
  height: calc(100% - 40px);
}
.a {
  height: 100%;
  width: 29%;
  border: 1px solid #37ddc0;
}

.title-item {
  /* border: 1px solid yellow; */
  height: 80px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.beijing {
  margin-left: 20px;
}
.wen {
  color: #9fb043;
}
.zi {
  color: #bebebe;
  text-align: center;
}
.right {
  border: 1px solid #37ddc0;
  height: 100%;
  width: 69%;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
  margin-top: 10px;
}
.c {
  display: flex;
  justify-content: space-between;
}
::v-deep .ant-tree {
  font-size: 16px;
}
::v-deep .a[data-v-0c7937d1] {
  border-right: none;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom: none;
}
::v-deep.ant-tree.ant-tree-directory
  > li
  span.ant-tree-node-content-wrapper:hover::before,
.ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li
  span.ant-tree-node-content-wrapper:hover::before {
  background: transparent;
}
::v-deep
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li.ant-tree-treenode-selected
  > span.ant-tree-node-content-wrapper::before {
  border: 2px solid #207064;
  background: #1a2223;
  margin: 0 20px 0 20px;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  color: #bebebe;
}
::v-deep
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li
  span.ant-tree-node-content-wrapper.ant-tree-node-selected {
  color: #37ddc0;
}

::v-deep .ant-table-tbody > tr.ant-table-row-selected td {
  background: transparent;
}
.ant-form-item{
  margin-left: 20px;
}
/* 分页 */
.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.ant-form-item-control {
  width: 200px;
}
a {
  color: #207064;
}

/* 分页 */
::v-deep .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>
<style>
.container {
  height: 100%;
  width: 100%;
}
/*.container .ant-table-thead > tr > th {*/
/*  background-color: #207064;*/
/*  color: #9fb043;*/
/*}*/
/*.container tr:hover td {*/
/*  background-color: rgba(0, 0, 0, 0) !important;*/
/*}*/
/*.container .ant-table-thead > tr,*/
/*.ant-table-tbody > tr {*/
/*  color: #bebebe;*/
/*}*/
/*.container .ant-table-tbody > tr > td {*/
/*  border-bottom: 1px solid #27615a;*/
/*}*/
/*.ant-table-row td:last-child {*/
/*  color: #207064;*/
/*}*/
.ant-input[disabled] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #2c4945;
}
.solvebtn {
  color: #207064;
}
</style>